<template>
  <div class="c-bg-sgray c-pb40">
    <div class="detail-bg c-pt40 c-ph24">
      <div class="c-pa c-p-l0 c-p-t0 c-w100 c-h c-pz9 ease c-text-hidden">
        <img class="c-w100 c-h500 c-object-fit-cover filter-blur mgCloseBig c-pa c-p-l0 c-p-t0 transform3" :src="$addXossFilter(teacherInfo.headimg, require('@/assets/defult_head.png'))" alt="">
        <div class="c-w100 c-h c-translucent-balck60 c-p c-pz10"></div>
      </div>
      <div class="c-pz10 c-p">
        <div class="c-fc-white c-p c-flex-row c-w100 c-fs24 c-pb32">
          <div class="c-ww140 c-hh140 c-flex-row c-flex-center c-bg-white c-mr20 c-br12 c-text-hidden " @click.stop="clickPreviewImage(teacherInfo.headimg)">
            <img class="c-w100 c-h c-center imgCloseBig" :src="$addXossFilter(teacherInfo.headimg, require('@/assets/defult_head.png'))" />
          </div>
          <div class="c-flex-column c-w0 c-flex-grow1 c-justify-sb">
            <div class="c-fs28 c-fw-b">{{teacherInfo.name}}</div>
            <div class="c-fs22 c-lh36">{{teacherInfo.title}}</div>
          </div>
        </div>
        <div class="c-flex-row c-justify-sb c-pt32 border-top-1px" v-if="teacherLabel && teacherLabel.length > 0">
          <div class="c-flex-row c-flexw-wrap c-aligni-center c-fs18 c-fc-white c-text-hidden" ref="teacherLabel" :style="isOverFlowLabel && isShowMoreLabel == false ? 'height: 30px' : ''">
            <span v-for="(item, i) in teacherLabel" :key="i" class="c-mr12 c-mb20 c-br8 c-ph10 c-hh32 c-lh32 booking-tag">{{item}}</span>
          </div>
          <div class="iconfont c-fs28 c-fs24 c-pz99 c-pr10 c-fc-white c-hh32 c-lh32 ease" :class="!isShowMoreLabel ? 'c-rotate180' : ''" @click="clickDown" v-if="isOverFlowLabel">&#xe67a;</div>
        </div>
      </div>
    </div>
    <div class="mt-120 c-ph24 c-p c-pz10">
      <div class="c-fs24 c-bg-white c-w100 c-pv20 c-br16 c-justify-sb c-fc-sblack">
        <div class="c-ph24">
          <div class="c-pb20 c-bd-b1">
            <div class="c-flex-row c-aligni-center c-flexw-wrap c-justify-sb c-w100">
              <price-bar class="c-ph0 priceBar c-w0 c-flex-grow1"
                :dataInfo="teacherInfo"
                :styleType="2"
              >
              </price-bar>
              <div class="fc-FAAD14 c-fs28 c-fw-b c-flex-row c-aligni-end">
                <span class="c-fs48 c-lh44">{{teacherInfo.score || '--'}}</span>分
              </div>
            </div>
            <div class="c-flex-row c-aligni-center c-pt12">
              <div class="c-flex-row c-aligni-end c-justify-center c-fs20 c-fc-sblack" v-if="teacherInfo.deposit">
                定金：{{'￥' | iosPriceFilter(teacherInfo.depositOptimal)}}{{teacherInfo.depositOptimal ? (teacherInfo.depositOptimal.optimalPrice == 0 ? '免费' : teacherInfo.depositOptimal.optimalPrice) : teacherInfo.deposit}}
              </div>
            </div>
          </div>
        </div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-flexw-wrap c-fs22 c-fc-sblack c-pt10 c-ph24" :class="teacherInfo.address ? 'c-pb20' : ''" v-if="teacherInfo.consumptionPatterns">
          <div class="c-flex-row c-aligni-center c-pt10">
            {{teacherInfo.consumptionPatterns.join('/')}}
          </div>
          <div class="c-pt10">{{teacherInfo.enrolls}}人预约</div>
        </div>
        <div class="c-ph24" v-if="teacherInfo.address">
          <div class="loaction c-flex-row c-aligni-center c-justify-sb">
            <div class="c-flex-row c-aligni-center c-pv20 c-pl24 c-w0 c-flex-grow1">
              <div class="iconfont c-fs24 c-mr8 c-fc-gray">&#xe7f1;</div>
              <div class="c-fs22 c-fc-sblack c-text-ellipsis1 c-w0 c-flex-grow1">{{teacherInfo.address}}</div>
            </div>
            <div class="iconfont c-fs20 c-fc-gray c-pv20 c-ph24" v-if="teacherInfo.lat != null && teacherInfo.lng != null" @click="clickLocation">&#xe635;</div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-hh88 c-w100 c-mt14" v-if="tabhBarFixed"></div>
    <my-small-tabbar id="tabhBar" class="c-pb10 c-mt14 c-fs26" :class="tabhBarFixed ? 'tabhBar' : ''" :fontSet="{defaultColor:'c-fc-gray', activeColor:'c-fc-xblack c-fw-b'}"  :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType" v-if="tabList && tabList.length > 0"></my-small-tabbar>
    <div class="c-ph24">
      <div id="desc">
        <div
          ref="desc"
          class="c-bg-white c-w100 c-pv30 c-ph20 c-br16 c-justify-sb c-fc-sblack c-mt10"
          v-if="(teacherInfo.desc != '' && teacherInfo.desc != null) || isHasDescDetail"
        >
          <div class="c-text-hidden" :style="isOverFlowDesc && isShowMoreDesc == false ? 'height: 250px' : ''">
            <template v-if="teacherInfo.desc != '' && teacherInfo.desc != null">
              <div class="c-fw-b c-fc-xblack c-p c-fs26 c-pb12">老师简介</div>
              <div class="c-lh46 c-p c-ws-pw c-ww-bw c-fs26 c-fc-sblack">
                <span>{{teacherInfo.desc}}
                </span>
              </div>
            </template>
            <template v-if="isHasDescDetail">
              <div class="c-fw-b c-fc-xblack c-p c-pb12 c-fs26" :class="teacherInfo.desc != '' && teacherInfo.desc != null ? 'c-mt40' : ''">简介详情</div>
              <course-description
                ref="descriptions"
                :independentCopy="cfg.isCopy"
                :independentCopyPicture="cfg.isCopyPicture"
                :prodType="ckFrom"
                :prodId="atId"
                @checkHasDescription="checkHasDescription"
              ></course-description>
            </template>
          </div>
          <div class="c-flex-row c-aligni-center c-justify-center c-fs20 theme-fc c-pt10 c-p c-pz100" @click="showMoreDesc" v-if="isOverFlowDesc">
            <img class="c-w100 c-hh50 c-pa c-p-l0 p-t-50" :src="require('@/assets/i/wap/booking/glass.png')" alt="" v-if="!isShowMoreDesc">
            {{!isShowMoreDesc ? '查看' : '收起'}}全部简介
            <span class="iconfont c-fs20 c-pl10" v-html="isShowMoreDesc ? '&#xe6ab;' : '&#xe6a9;'"></span>
          </div>
        </div>
      </div>
      <div id="timeBook">
        <div class="c-bg-white c-w100 c-pv30 c-br16 c-justify-sb c-fc-sblack c-mt20 c-p c-pz100" ref="timeBook" v-if="bookingList.length > 0">
          <div class="c-text-hidden" :style="isOverFlowTime && isShowMoreTime == false ? 'height: 250px' : ''">
            <time-picker
              ref="timePicker"
              @chooseTime="chooseTime"
              @clickChooseDate="clickChooseDate"
              @clickMoreDay="clickMoreDay"
              @confirmCalendarDay="confirmCalendarDay"
              @closeopenCalendarModal="closeopenCalendarModal"
              @clickWeekDay="clickWeekDay"
            ></time-picker>
            <div v-if="identity == 1 && teacherInfo.isUserGroup == 1 && teacherInfo.isInUserGroup != 1" class="c-w100 c-maxw640 c-ph24 c-pf c-p-b0 c-p-l0 c-p-r0 c-m-0auto c-pv18 c-bg-white" :class="isShowMonth ? '' : 'c-pz1000'">
              <div class="c-bg-ccc c-w100 c-hh64 c-lh64 c-fc-white c-fs26 c-textAlign-c c-br32 c-fc-white'" @click="goReserve(0)" >
                {{$isWxAppIos() ? '咨询客服' : '仅指定用户可预约'}}
              </div>
            </div>
            <div v-else class="c-w100 c-maxw640 c-ph24 c-pf c-p-b0 c-p-l0 c-p-r0 c-m-0auto c-pv18 c-bg-white" :class="isShowMonth ? '' : 'c-pz1000'">
              <div class="theme-bg c-w100 c-hh64 c-lh64 c-fc-white c-fs26 c-textAlign-c c-br32 theme-bg c-fc-white" @click="goReserve(0)">
                {{$isWxAppIos() && teacherInfo.deposit && Number(teacherInfo.deposit) > 0 ? '咨询客服' : (identity == 1 ? '立即预约' : '我的排班')}}
              </div>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-justify-center c-fs20 theme-fc c-pt10 c-p" @click="showMoreTime" v-if="isOverFlowTime">
            <img class="c-w100 c-hh50 c-pa c-p-l0 p-t-50" :src="require('@/assets/i/wap/booking/glass.png')" alt="" v-if="!isShowMoreTime">
            {{!isShowMoreTime ? '查看' : '收起'}}全部时间
            <span class="iconfont c-fs20 c-pl10" v-html="isShowMoreTime ? '&#xe6ab;' : '&#xe6a9;'"></span>
          </div>
        </div>
      </div>
      <div id="comment">
        <div class="c-bg-white c-w100 c-pv30 c-ph24 c-br16 c-justify-sb c-fc-sblack c-mt20" v-if="commentList.length != 0">
          <div class="c-fs26 c-fc-xblack">
            <div class="c-p c-inlineblack">
              <div class="c-fw-b c-p">用户评价</div>
              <div class="c-w100 c-hh6 c-pa c-p-b0 c-p-l0"></div>
            </div>
            <div>
              <div
                :class="index != commentList.length - 1 ? 'c-bd-b1 c-pv30' : 'c-pt30'"
                v-for="(item, index) in (isShowMoreComment ? commentList : commentList.filter((obj, i) => {return i < 2}))" :key="index">
                <div class="c-flex-row c-justify-sb c-pb24">
                  <img class="c-hh68 c-ww68 c-brp50 c-center imgCloseBig c-mr20" :src="$addXossFilter(item.headimgurl, require('../../../assets/defult_head.png'))" />
                  <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb">
                    <div class="c-flex-row c-justify-sb">
                      <div class="c-fw-b c-flex-row c-aligni-center">
                        <div>{{nameLength(item.nickname, 2)}}</div>
                        <div class="c-fs20 c-ww56 c-hh28 c-lh28 c-flex-row c-flex-center theme-bg c-fc-white c-br8 c-ml12" v-if="item.handpick == 1">精选</div>
                      </div>
                      <rater-com :value="item.score / 2" star="<span class='iconfont c-fs24'>&#xe8c7;</span>" fontSize="20" active-color="#FAAD14"></rater-com>
                    </div>
                    <div class="c-fs20 c-fc-gray">{{item.createdAt}}</div>
                  </div>
                </div>
                <div class="c-wb-ba">{{item.content}}</div>
              </div>
              <div class="c-flex-row c-aligni-center c-justify-center c-fs20 theme-fc c-pt20" @click="showMoreComment" v-if="commentList.length > 2">
                {{!isShowMoreComment ? '查看' : '收起'}}全部评价
                <span class="iconfont c-fs20 c-pl10" v-html="isShowMoreComment ? '&#xe6ab;' : '&#xe6a9;'"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="end"></div>
    </div>
    <!-- 半弹窗预约时间 -->
    <open-modal :openModal="showTimePicker" @closeModal="hiddenTimePicker" class="noTransform">
      <div class="c-bg-white c-br-tl32 c-br-tr32 c-text-hidden c-maxw640 c-pb20 c-p c-pz1000">
        <div class="c-fs28 c-fw-b c-textAlign-c c-pv36">可约时间</div>
        <div @click="hiddenTimePicker" class="c-fs28 c-fc-gray iconfont c-p-t40 c-p-r24 c-pa">&#xe84e;</div>
        <div class="c-ph24 c-pb120">
          <div class="c-bd1 c-br16 c-pv22">
            <div class="c-maxh720" :class="isShowMonth ? '' : 'c-contexty-scroll'">
              <time-picker
                ref="modalTimePicker"
                @chooseTime="chooseTime"
                @clickMoreDay="clickMoreDay"
                @clickChooseDate="clickChooseDate"
                @closeopenCalendarModal="closeopenCalendarModal"
                @clickEdit="clickEdit"
                @confirmCalendarDay="confirmCalendarDay"
              ></time-picker>
            </div>
            <div class="c-w100 c-ph24 c-pv18 c-bg-white c-pf c-p-b0 c-p-l0 c-p-r0 c-m-0auto c-pz1000" v-if="identity == 1">
              <div class="c-w100 c-hh64 c-lh64 c-fs26 c-textAlign-c c-br32 theme-bg c-fc-white" :class="isModalTimePicker ? 'theme-bg c-fc-white' : 'c-bg-ccc c-fc-white'" @click="goReserve(1)" >{{$isWxAppIos() ? '咨询客服' : '立即预约'}}</div>
            </div>
          </div>
        </div>
      </div>
    </open-modal>
    <!-- 自选时间--按分钟预约时间间隔 -->
    <open-modal :openModal="showTime" @closeModal="closeChooseTime">
      <div class="c-bg-white c-br-tl32 c-br-tr32 c-text-hidden c-maxw640 c-pb20 c-p c-pz100">
        <div class="c-fs28 c-fw-b c-textAlign-c c-pv36">可约时间</div>
        <div @click="closeChooseTime" class="c-fs28 c-fc-gray iconfont c-p-t40 c-p-r24 c-pa">&#xe84e;</div>
        <div class="c-ph24" :class="identity == 1 ? 'c-pb120' : ''">
          <div class="c-bd1 c-br16 c-pv22">
            <div class="c-contexty-scroll c-maxh720">
              <time-picker
                ref="dayTimePicker"
                @chooseTime="chooseTime"
              >
                <template v-slot v-if="identity == 1">
                  <div v-if="isTeacher && showTime" class="c-w100 c-maxw640 c-ph24 c-pf c-p-b0 c-p-l0 c-p-r0 c-m-0auto c-pz1000 c-pv18 c-bg-white">
                    <div class="theme-bg c-w100 c-hh64 c-lh64 c-fc-white c-fs26 c-textAlign-c c-br32" @click="goMyBookingForTeacher">我的排班</div>
                  </div>
                  <div v-else class="c-w100 c-maxw640 c-ph24 c-pf c-p-b0 c-p-l0 c-p-r0 c-m-0auto c-pz1000 c-pv18 c-bg-white">
                    <div class="c-w100 c-hh64 c-lh64 c-fs26 c-textAlign-c c-br32 theme-bg c-fc-white" @click="goReserve(0)">{{$isWxAppIos() && teacherInfo.deposit && Number(teacherInfo.deposit) > 0 ? '咨询客服' : '立即预约'}}</div>
                  </div>
                </template>
              </time-picker>
            </div>
          </div>
        </div>
      </div>
    </open-modal>
    <!-- 修改预约时间段状态 -->
    <open-modal class="c-pz100" :openModal="openEditModal" @closeModal="closeOpenEditModal">
      <div v-if="isFromScheduling && ((timeType == 1 && selectedEditItem) || (timeType != 1 && bookingList[selectedEditPIndex] && selectedEditItem))" class="c-bg-white c-br-tl32 c-br-tr32 c-text-hidden c-maxw640 c-pb20 c-ph24 c-p">
        <div @click="closeOpenEditModal" class="c-fs28 c-fc-gray iconfont c-p-t24 c-p-r24 c-pa">&#xe84e;</div>
        <div class="c-pt40 c-pb20 c-fs28 c-fc-xblack c-fw600 c-textAlign-c">修改预约时间</div>
        <div class="c-fs22 c-fc-gray c-mb6">停号取消预约，已预约的用户会取消预约，支付的预约金会退回给用户</div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-pv26 c-bd-b1">
          <div class="c-fs24 c-fc-sblack">预约时间</div>
          <div class="c-fs24 c-fc-xblack">{{(timeType == 1 ? selectedEditItem.date : bookingList[selectedEditPIndex].date) + ' ' + selectedEditItem.startAt}}</div>
        </div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-pv26 c-bd-b1">
          <div class="c-fs24 c-fc-sblack">预约状态</div>
          <div @click="editBookingStatus" class="c-fs24 c-fc-xblack">{{selectedEditStatus[0] == 1 ? '正常开放' : '暂停预约'}}<span class="iconfont c-fs20 c-fc-gray c-ml8">&#xe60e;</span></div>
        </div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-pv26 c-bd-b1">
          <div class="c-fs24 c-fc-sblack">可预约人数</div>
          <div class="c-fs24 c-fc-xblack">{{selectedEditItem.number + selectedEditItem.enrollNum}}人</div>
        </div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-pv26 c-bd-b1">
          <div class="c-fs24 c-fc-sblack">已预约人数</div>
          <div class="c-fs24 c-fc-xblack">{{selectedEditItem.enrollNum}}人</div>
        </div>
        <div @click="confirmEdit" class="c-fs28 c-fc-white c-hh64 c-flex-row c-flex-center c-mt40 c-br32 theme-bg">确定</div>
      </div>
    </open-modal>
    <!-- 切换预约状态 -->
    <popup-picker v-if="isFromScheduling"
      :show.sync="showEditStatus"
      :data="editStatusList"
      :show-name="true"
      v-model="selectedEditStatus"
      @on-change="changEditStatus"
    ></popup-picker>
  </div>
</template>

<script>
import TimePicker from "@/components/templates/timePicker.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import courseDescription from '@/components/templates/courseDescription';
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import PriceBar from '@/components/templates/common/priceBar.vue';
import raterCom from "@/components/templates/common/raterCom.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js";
import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index';
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
let nowDayStr = utilJs.dateFormat(+new Date()); //获取今天的日期
let handleScrollStop = 0; // 处理点击切换tab得时候，滚动监听暂停
export default {
  name: "BookingTime",
  components: {
    PopupPicker,
    OpenModal,
    TimePicker,
    MySmallTabbar,
    courseDescription,
    PriceBar,
    raterCom
  },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      themeName: localStorage.getItem("themeName") ? localStorage.getItem("themeName") : "mb5",
      isLoading: false,
      showNone: false,
      cfg: JSON.parse(localStorage.getItem("cfg")),
      atId: '',
      teacherLabel: [],
      teacherInfo: {},
      calendarInfo: {},
      curSelectDate: "", //当前选择的日期 2018/11
      canGoNext: false, //是否可以切换上个月
      canGoPrev: false, //是否可以切换下个月
      timeList: [],
      bookingList: [],
      atmId: '',
      startAt: '',
      endAt: '',
      date: '',
      noneShow: false,
      showTime: false,
      timeType: 0,
      dataList: [],
      dateType: 1,
      enableEnroll: true,
      isCalendarStyle: false,
      calendarSelectDate: '',
      selectedMonth: '',
      isFromScheduling: false, //老师查看排班页面复用此页面
      openEditModal: false,
      showEditStatus: false,
      editStatusList: [[{
        name: '正常开放',
        value: 1
      }, {
        name: '暂停预约',
        value: 0
      }]],
      selectedEditItem: null,
      selectedEditIndex: -1,
      selectedEditPIndex: -1,
      selectedEditStatus: [],
      isTeacher: false,
      tabList: [{
        title: '个人简介',
        index: 0,
      }],
      tabhBarFixed: false, // tab栏是否固定顶部
      tabhBarOffsetTop: 0, // tab栏offsetTop
      descOffsetTop: 0,
      timeBookOffsetTop: 0,
      commentOffsetTop: 0,
      endOffsetTop: 0,
      typeBar: 0,
      commentList: [],
      type: 0,
      isOverFlowDesc: false, // 内容区域是否超过一定的高度
      isOverFlowTime: false, // 预约时间区域是否超过一定的高度
      isOverFlowLabel: false, // 老师标签是否超过一定的高度
      isShowMoreDesc: false, // 是否显示简介的展开收起
      isShowMoreTime: false, // 是否显示时间预约的展开收起
      isShowMoreLabel: false, // 是否显示时间预约标签
      isShowMoreComment: false, // 是否显示评价的展开收起
      tenObj: null,
      isHasDescDetail: true, // 老师简介详情
      isShowMonth: false,
      showTimePicker: false, // 是否展示时间选择
      dateInfo: null, // 时间选择
      isModalTimePicker: false, // 半弹窗是否选择时间
      bindPhoneSetting: null, // 判断绑定手机
      identity: 1, // 1 学员 2 老师
    }
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    this.isLoading = false;
    this.showNone = false;
    this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    this.isFromScheduling = this.$route.query.isFromScheduling || "";
    setDocumentTitle(this.isFromScheduling ? '排班情况' : "预约");
    this.atId = this.$route.query.atId || "";
    this.aeId = this.$route.query.aeId || "";
    this.goodsRoomId = this.$route.query.goodsRoomId || "";
    this.ckFrom = this.$route.query.ckFrom || global.ckFrom.booking;
    this.teacherLabel = [];
    this.teacherInfo = {};
    this.curSelectDate = '';
    this.calendarInfo = {};
    this.bookingList = [];
    this.canGoNext = false; //是否可以切换上个月
    this.canGoPrev = false; //是否可以切换下个月
    this.startAt = '';
    this.endAt = '';
    this.date = '';
    this.atmId = '';
    this.showTime = false;
    this.timeType = 0;
    this.dateType = 1;
    this.dataList = [];
    this.enableEnroll = true;
    this.isCalendarStyle = false;
    this.calendarSelectDate = '';
    this.selectedMonth = "";
    this.openEditModal = false;
    this.showEditStatus = false;
    this.selectedEditItem = null;
    this.isTeacher = false;
    this.selectedEditIndex = -1;
    this.selectedEditPIndex = -1;
    this.tabList = [{
      title: '个人简介',
      index: 0,
    }],
    this.tabhBarFixed = false; // tab栏是否固定顶部
    this.tabhBarOffsetTop = 0; // tab栏offsetTop
    this.descOffsetTop = 0;
    this.timeBookOffsetTop = 0;
    this.commentOffsetTop = 0;
    this.typeBar = 0;
    this.isShowMoreDesc = false;
    this.isShowMoreTime = false;
    this.isShowMoreComment = false;
    this.isShowMoreLabel = false;
    this.isOverFlowDesc = false;
    this.isOverFlowTime = false;
    this.isOverFlowLabel = false;
    this.showTimePicker = false;
    this.isHasDescDetail = true; // 老师简介详情
    this.bindPhoneSetting = null;
    this.isShowMonth = false;
    this.identity = 1;
    this.endOffsetTop = 0;
    handleScrollStop = 0;
    getBindPhoneSetting().then(res => { // 游客模式需要绑定手机号
      this.bindPhoneSetting = res;
    });
    this.getIdentityInfo();
    window.addEventListener('scroll', this.handleScroll);
  },
  deactivated() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    // 点击关闭修改预约时间半弹窗
    closeOpenEditModal() {
      this.openEditModal = false;
      this.showEditStatus = false;
    },
    // 关闭月份选择弹窗
    closeopenCalendarModal() {
      this.isShowMonth = false;
    },
    // 确认修改
    clickNewDate() {
      if (!this.isModalTimePicker) return
      let data = this.dateInfo;
      this.date = data.date;
      this.atmId = data.atmId;
      this.startAt = data.startAt;
      this.endAt = data.endAt;
      this.hiddenTimePicker();
    },
    // 隐藏预约时间
    hiddenTimePicker() {
      this.showTimePicker = false;
      this.isShowMonth = false;
      if (this.dateType == 1) this.date = ''
    },
    // 没选择预约时间显示预约时间半弹窗
    clickShowTimePicker() {
      this.showTimePicker = true;
      this.$nextTick(() => {
        this.$refs.modalTimePicker.publicInitData({
          bookingList: this.bookingList,
          dateType: this.dateType,
          timeType: this.timeType,
          date: this.date,
          atmId: this.atmId,
          enableEnroll: this.enableEnroll,
          atId: this.atId,
          curSelectDate: this.curSelectDate,
          teacherStatus: this.teacherInfo.status,
          isFromScheduling: this.isFromScheduling
        })
      })
    },
    // 重新获取每个模板的offsetTop
    setOffsetTop() {
      this.descOffsetTop = document.querySelector('#desc').offsetTop;
      this.timeBookOffsetTop = document.querySelector('#timeBook').offsetTop;
      this.commentOffsetTop = document.querySelector('#comment').offsetTop;
      this.endOffsetTop = document.querySelector('#end').offsetTop;
    },
    // 设置标题栏
    setTabList() {
      if (this.bookingList && this.bookingList.length > 0) {
        this.tabList.push({
          title: '可约时间',
          index: 1,
        })
        this.typeBar = this.tabList.length > 0 && (!this.tabList.find(item => item.index == 0)) ? 1 : this.typeBar;
      }
      if (this.commentList && this.commentList.length > 0) {
        this.tabList.push({
          title: '用户评价',
          index: 2,
        })
        this.typeBar = this.tabList.length > 0 && (!this.tabList.find(item => item.index == 0)) && (!this.tabList.find(item => item.index == 1)) ? 2 : this.typeBar;
      }
      this.setOffsetTop();
      setTimeout(() => {
        this.setOffsetTop();
      }, 1000)
    },
    // 页面滚动监听
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (this.tabhBarOffsetTop > 0) {
        if (scrollTop >= this.tabhBarOffsetTop - 30) {
          this.tabhBarFixed = true;
        } else {
          this.tabhBarFixed = false;
        }
      }
      if (handleScrollStop) {
        handleScrollStop = 0;
        setTimeout(() => {
          handleScrollStop = 1
        }, 200)
        return
      }
      if (this.tabList.length == 1) return
      if (((scrollTop < this.descOffsetTop) || ((scrollTop > this.descOffsetTop) && (scrollTop < this.timeBookOffsetTop - 250))) && this.tabList.find(item => item.index == 0)) {
        this.typeBar = 0
      } else if ((scrollTop > (this.timeBookOffsetTop - 250)) && (scrollTop < this.commentOffsetTop - 250) && this.tabList.find(item => item.index == 1)) {
        this.typeBar = 1
      } else if (scrollTop > (this.commentOffsetTop - 250)) {
        this.typeBar = 2
      }
    },
    changeType(type) {
      handleScrollStop = 1;
      if (this.typeBar == type) return
      this.typeBar = type;
      const tab = this.tabList.find(item => item.index == type);
      if (tab) {
        const id = tab.index == 0 ? '#desc' : tab.index == 1 ? '#timeBook' : '#comment'
        let top = document.querySelector(id).offsetTop != null
        ? document.querySelector(id).offsetTop - 50
        : 0;
        window.scrollTo({
          top: top,
          // behavior: "smooth"
        });
      }
    },
    // 简介详情无数据返回处理
    checkHasDescription() {
      this.isHasDescDetail = false;
      if (this.isHasDescDetail == false && (this.teacherInfo.desc == '' || this.teacherInfo.desc == null)) {
        this.tabList = this.tabList.filter(item => { return item.index != 0});
      }
    },
    // 查看放大图片
    clickPreviewImage(image) {
      let imgArr = [];
      imgArr.push(image);
      wxUtilJs.previewImage({
        current: image, // 当前显示图片的http链接
        urls: imgArr // 需要预览的图片http链接列表
      });
    },
    //获取师资信息
    getIdentityInfo() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      // type 1师资详情页 2预约时间页
      utilJs.getMethod(`${global.apiurl}appointment/getTeacherInfo?atId=${this.atId}&identity=${this.isFromScheduling ? 2 : 1}`, res => {
        this.isLoading = false;
        if (res.statusCode) {
          this.$routerGo(this, "replace", {
            path: `/error/emptyPage?info=该资源已下线&from=booking`
          });
        } else {
          this.identity = res.identity == 2 ? 2 : 1;
          this.teacherLabel = res.labels;
          this.teacherInfo = res.teacherInfo;
          this.teacherInfo.enrolls = res.enrolls;
          this.teacherInfo.score = res.score;
          this.isFromScheduling = this.identity == 2;
          if (this.teacherInfo.teacherUserId == localStorage.getItem("userId")) {
            this.isTeacher = true;
          }
          this.getCalendar();
          this.$nextTick(() => {
            this.tabhBarOffsetTop = document.querySelector("#tabhBar").offsetTop != null
              ? document.querySelector("#tabhBar").offsetTop
              : 68;
            // 请求评价
            this.getComments();
            // 请求用户标签
            if (this.$refs.teacherLabel && this.$refs.teacherLabel.offsetHeight > 35) {
              this.isOverFlowLabel = true;
            } else {
              this.isOverFlowLabel = false;
            }
            // 请求简介
            if (this.$refs.descriptions) {
              this.$refs.descriptions.getDescptionDetail();
              setTimeout(() => {
                if (this.$refs.desc && this.$refs.desc.offsetHeight > 250) {
                  this.isOverFlowDesc = true;
                } else {
                  this.isOverFlowDesc = false;
                }
              }, 1000);
            }
          })
          this.wechatShare();
        }
      }, failRes => {
        this.isLoading = false;
      });
    },
    // 获取评论列表
    getComments() {
        utilJs.getMethod(`${global.apiurl}appointment/getCommentList?atId=${this.atId}&limit=10&page=1`, res => {
          this.commentList = res.data;
        }, failRes => {
        });
    },
    goBooking() {
      this.$routerGo(this, "push", {
        path: `/homePage/booking/bookingTime?atId=${this.atId}`
      });
    },
    // 查看老师标签
    clickDown() {
      this.isShowMoreLabel = !this.isShowMoreLabel;
    },
    // 查看全部简介
    showMoreDesc() {
      this.isShowMoreDesc = !this.isShowMoreDesc;
      this.$nextTick(() => {
        this.setOffsetTop();
      })
    },
    // 查看全部时间
    showMoreTime() {
      // 设置指定用户预约且不在指定用户列表内
      if (!this.isFromScheduling && this.teacherInfo.isUserGroup == 1 && this.teacherInfo.isInUserGroup != 1) {
        this.$showCjToast({
          text: "仅指定用户可预约",
          type: "warn",
        });
        return
      }
      if ((!this.date || (this.timeType == -1)) && !this.startAt && !this.endAt) {
        if (this.dateType == 1) this.date = ''
        this.clickShowTimePicker();
      }
    },
    // 查看全部评价
    showMoreComment() {
      this.isShowMoreComment = !this.isShowMoreComment;
      this.$nextTick(() => {
        this.setOffsetTop();
      })
    },
    nameLength(name, length) {
      return utilJs.nameLength(name, length)
    },
    closeChooseTime() {
      this.showTime = false;
    },
    goMyBookingForTeacher() {
      this.$routerGo(this, "push", {
        path: `/member/myBooking/myBookingList`
      });
    },
    confirmEdit() {
      if (this.timeType == 1) {
        this.bookingList[this.selectedEditIndex].status = this.selectedEditStatus[0];
        this.bookingList[this.selectedEditIndex].number = this.bookingList[this.selectedEditIndex].number + this.bookingList[this.selectedEditIndex].enrollNum;
        this.bookingList[this.selectedEditIndex].enrollNum = 0;
      } else {
        this.bookingList[this.selectedEditPIndex].times[this.selectedEditIndex].status = this.selectedEditStatus[0];
        this.bookingList[this.selectedEditPIndex].times[this.selectedEditIndex].number = this.bookingList[this.selectedEditPIndex].times[this.selectedEditIndex].number + this.bookingList[this.selectedEditPIndex].times[this.selectedEditIndex].enrollNum;
        this.bookingList[this.selectedEditPIndex].times[this.selectedEditIndex].enrollNum = 0;
      }
      let postData = {
        atmId: this.selectedEditItem.atmId,
        status: this.selectedEditStatus[0]
      }
      if (this.timeType != 1) {
        postData.atId = this.bookingList[this.selectedEditPIndex].atId
      } else {
        postData.atId = this.selectedEditItem.atId;
      }
      utilJs.postMethod(`${global.apiurl}appointment/editTimeByTeacher`, postData, res => {
        this.$showCjToast({
          text: "修改成功",
          type: "success",
        });
        this.openEditModal = false;
      })
    },
    changEditStatus(changedValue) {
      this.selectedEditStatus = changedValue;
    },
    editBookingStatus() {
      this.showEditStatus = true;
    },
    clickEdit(isAllDay, eItem, eIndex, pIndex) {
      if (eItem.isOverdue == 1) {
        return;
      }
      if (this.teacherInfo.status == 0) {
        return;
      }
      this.selectedEditItem = eItem;
      this.selectedEditIndex = eIndex;
      if (isAllDay == 0) {
        this.selectedEditPIndex = pIndex;
      }
      this.selectedEditStatus = [eItem.status]
      this.openEditModal = true;
    },
    // 选择月份
    clickMoreDay() {
      this.isShowMonth = true;
    },
    clickLocation() {
      if (Number(this.teacherInfo.lat) <= 0 && Number(this.teacherInfo.lng) <= 0) {
        return;
      }
      let $this = this;
      wxUtilJs.openLocation({
        latitude: parseFloat($this.teacherInfo.lat), // 纬度，浮点数，范围为90 ~ -90
        longitude: parseFloat($this.teacherInfo.lng), // 经度，浮点数，范围为180 ~ -180。
        name: "", // 位置名
        address: $this.teacherInfo.address, // 地址详情说明
        scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: "" // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
    // 获取预约时间日期
    getCalendar() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}appointment/getDateList?atId=${this.atId}&type=${this.isFromScheduling ? 2 : 1}`, res => {
        this.isLoading = false;
        this.timeType = res.allDay;
        this.dateType = res.dateType;
        this.enableEnroll = res.enableEnroll;
        this.bookingList = res.details; //可预约时间
        if (!this.isFromScheduling) {
          let dateList = [];
          for (let key of this.bookingList) {
            let type = 0;
            if (key.date >= nowDayStr && key.isFull != 1 && key.isEnroll != 1) {
              type = 1;
            }
            if (this.timeType == 1 && key.date == nowDayStr) {
              let cDStartTimeTamp = new Date(key.date.replace(/-/g, "/") + ' ' + key.startAt).getTime();
              let nowTimeTamp = new Date().getTime();
              if (cDStartTimeTamp < nowTimeTamp) {
                type = 0;
              }
            }
            let item = {
              atId: key.atId,
              atmId: key.atmId,
              date: key.date,
              isFull: key.isFull,
              type: type,
              week: key.week,
              number: key.number,
              isEnroll: key.isEnroll,
            }
            if (this.timeType == 1) {
              item.startAt = key.startAt;
              item.endAt = key.endAt;
              item.status = key.status;
            }
            dateList.push(item);
          };
          this.bookingList = dateList;
          if (this.timeType != 1 && this.dateType == 2 && this.bookingList.length > 0) {
            this.isCalendarStyle = true;
            this.curSelectDate = this.bookingList[0].date;
            this.date = this.bookingList[0].date;
          }
        }
        if (this.bookingList && this.bookingList.length > 0) {
          this.$nextTick(() => {
            this.$refs.timePicker.publicInitData({
              bookingList: this.bookingList,
              dateType: this.dateType,
              timeType: this.timeType,
              date: this.date,
              atmId: this.atmId,
              enableEnroll: this.enableEnroll,
              atId: this.atId,
              curSelectDate: this.curSelectDate,
              teacherStatus: this.teacherInfo.status,
              isFromScheduling: this.isFromScheduling,
              identity: this.identity,
              isFromDetail: 1
            })
          })
        }
        setTimeout(() => {
          // 判断是否隐藏更多预约时间
          if (this.$refs.timeBook && this.$refs.timeBook.offsetHeight > 250) {
            this.isOverFlowTime = true;
          } else {
            this.isOverFlowTime = false;
          }
          this.setTabList()
        }, 300)
      }, failRes => {
        this.isLoading = false;
      });
    },
    // 切换星期值
    clickWeekDay(data) {
      this.date = data.date;
      this.curSelectDate = data.date;
    },
    // 月份选择器选择date
    confirmCalendarDay(data) {
      let {date, bookingList, isFromDetail} = data;
      if (isFromDetail == 1) {
        this.date = date;
        this.curSelectDate = date;
        this.bookingList = bookingList;
      }
      this.isShowMonth = false;
    },
    // 选择预约日期
    async clickChooseDate(data) {
      // 设置指定用户预约且不在指定用户列表内
      if (!this.isFromScheduling && this.teacherInfo.isUserGroup == 1 && this.teacherInfo.isInUserGroup != 1) {
        this.$showCjToast({
          text: "仅指定用户可预约",
          type: "warn",
        });
        return
      }
      // 过滤按天或者自选时间间隔里面设置按分钟预约
      if (!data.showTime) {
        // 主要处理的是按天预约不用细分到分钟的流程
        const status = await this.checkEnrollTime(data.atmId);
        // 1：可预约；2：预约人数已满；3：预约时间已过期；4：已过截止预约时间
        if (this.teacherInfo.enrollEndTime && this.teacherInfo.enrollEndTime != 0 && this.teacherInfo.enrollEndUnit && status >= 2) {
          let time = status == 4 ? `${this.teacherInfo.enrollEndTime}${this.teacherInfo.enrollEndUnit == 1 ? '分钟' : this.teacherInfo.enrollEndUnit == 2 ? '小时' : '天'}` : '';
          let msg = status == 2 ? `预约人数已满` :
                    status == 3 ? `预约时间已过期` :
                    status == 4 ? `该服务开始前${time}停止预约。请合理规划时间，提前完成预约，避免错过。如有疑问，可联系商家，感谢您的理解和配合！` : ''
          this.$cjConfirm({
            title: '提示',
            message: msg,
            showCancelButton: false,
            clickCloseModal: false,
            onConfirm:() => {
              this.closeChooseTime();
              this.hiddenTimePicker();
            }
          })
          return;
        }
      }
      this.atmId = data.atmId;
      this.startAt = data.startAt;
      this.endAt = data.endAt;
      this.date = data.date;
      if (this.timeType == 1 && (this.dateType == 1 || this.dateType == 2) && this.atmId != '') {
        this.goReserve(0);
      }
      if (data.showTime) {
        this.showDayTimePicker();
      }
    },
    // 点击显示按日期选择分钟间隔时间段
    showDayTimePicker() {
      if (this.showTime) {
        if (this.date == "" || this.startAt == "") {
          this.$showCjToast({
            text: "请选择预约时间",
            type: "warn",
          });
          return;
        }
      }
      this.showTime = true;
      this.$nextTick(() => {
        this.$refs.dayTimePicker.publicInitData({
          bookingList: this.bookingList,
          dateType: this.dateType,
          timeType: this.timeType,
          date: this.date,
          atmId: this.atmId,
          enableEnroll: this.enableEnroll,
          curSelectDate: this.curSelectDate,
          teacherStatus: this.teacherInfo.status,
          isFromScheduling: this.isFromScheduling,
          showTime: true,
          atId: this.atId
        })
      })
    },
    async chooseTime(data) {
      // 设置指定用户预约且不在指定用户列表内
      if (!this.isFromScheduling && this.teacherInfo.isUserGroup == 1 && this.teacherInfo.isInUserGroup != 1) {
        this.$showCjToast({
          text: "仅指定用户可预约",
          type: "warn",
        });
        return
      }
      // 主要处理的是按分钟预约的流程
      const status = await this.checkEnrollTime(data.atmId);
      // 1：可预约；2：预约人数已满；3：预约时间已过期；4：已过截止预约时间
      if (this.teacherInfo.enrollEndTime && this.teacherInfo.enrollEndTime != 0 && this.teacherInfo.enrollEndUnit && status >= 2) {
        let time = status == 4 ? `${this.teacherInfo.enrollEndTime}${this.teacherInfo.enrollEndUnit == 1 ? '分钟' : this.teacherInfo.enrollEndUnit == 2 ? '小时' : '天'}` : '';
        let msg = status == 2 ? `预约人数已满` :
                  status == 3 ? `预约时间已过期` :
                  status == 4 ? `该服务开始前${time}停止预约。请合理规划时间，提前完成预约，避免错过。如有疑问，可联系商家，感谢您的理解和配合！` : ''
        this.$cjConfirm({
          title: '提示',
          message: msg,
          showCancelButton: false,
          clickCloseModal: false,
          onConfirm:() => {
            this.closeChooseTime();
            this.hiddenTimePicker();
          }
        })
        return;
      }
      this.date = data.date;
      this.atmId = data.atmId;
      this.startAt = data.startAt;
      this.endAt = data.endAt;
      if (this.date && this.startAt && this.endAt) {
        this.goReserve(0);
      }
    },
    goDetail() {
      this.$routerGo(this, "push", {
        path: `/homePage/booking/bookingDetail?atId=${this.atId}`
      });
    },
    checkEnrollTime(atmId) {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(`${global.apiurl}appointment/checkEnrollTime?atmId=${atmId}`, res => {
          // 1：可预约；2：预约人数已满；3：预约时间已过期；4：已过截止预约时间
          resolve(res)
        }, () => {
          reject(false);
        })
      });
    },
    async goReserve(fromModal = 0) {
      if (this.bindPhoneSetting && this.bindPhoneSetting.isVisitorBind) {
        this.$routerGo(this, "push", {path: "/homePage/login/bindMobile"});
        return;
      }
      // 设置指定用户预约且不在指定用户列表内
      if (!this.isFromScheduling && this.teacherInfo.isUserGroup == 1 && this.teacherInfo.isInUserGroup != 1) {
        return
      }
      // 没有预约时间
      if (fromModal == 0 && ((!this.date && !this.startAt && !this.endAt) || (this.dateType == 2 && this.timeType == -1 && !this.startAt && !this.endAt))) {
        this.clickShowTimePicker();
        return;
      } else if (this.dateType == 1 && this.timeType == -1 && this.date && !this.startAt && !this.endAt) {
        this.showDayTimePicker();
        return
      }
      if (this.teacherInfo.teacherUserId == localStorage.getItem("userId")) {
        this.$showCjToast({
          text: "不可预约自己",
          type: "warn",
        });
        return
      }
      if (this.timeType == 1) {
        if (this.date == "") {
          this.$showCjToast({
            text: "请选择预约时间",
            type: "warn",
          });
          return;
        }
      } else {
        if (this.date == "" || this.startAt == "") {
          this.$showCjToast({
            text: "请选择预约时间",
            type: "warn",
          });
          return;
        }
      }
      // 如果是小程序环境 ios && 预约金大于0，即最后要支付，那么就不需要跳转到bookingForm，直接咨询客服
      if (this.$isWxAppIos() && this.teacherInfo.depositOptimal && Number(this.teacherInfo.depositOptimal.optimalPrice) > 0) {
        utilJs.miniProgramGoTo("push", "/pages/member/contact/index")
        return;
      }
      let goPath = `/homePage/booking/bookingForm?atId=${this.atId}&atmId=${this.atmId}&date=${this.date}&startAt=${this.startAt}&endAt=${this.endAt}&timeType=${this.timeType}`;
      goPath = this.goodsRoomId ? `${goPath}&goodsRoomId=${this.goodsRoomId}` : goPath;
      this.$routerGo(this, "push", {
        path: goPath
      });
    },
    //分享
    wechatShare: function () {
      let title = this.teacherInfo.name;
      let shareImg = this.teacherInfo.headimg;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?atId=${this.atId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.teacherInfo.desc;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = this.teacherInfo.name;
      let shareImg = this.teacherInfo.headimg;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?atId=${this.atId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.teacherInfo.desc;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
}
</script>

<style scoped>
.booking-tag {
  background-color: rgba(255, 255, 255, 0.2);
}
.c-mh12 {
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}
.c-mh-16 {
  margin-left: -0.4rem;
  margin-right: -0.4rem;
}
.c-mh-10 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.c-pb130{
  padding-bottom: 3.25rem;
}
.c-mh16{
  margin-left: 0.4rem; margin-right: 0.4rem;
}
.z100 {
  z-index: 100!important;
}
.detail-bg {
  position: relative;
  padding-bottom: 3.2rem;
}
.time-list {
  background: #f5f6f6;
}
.p-bm6 {
  bottom: -0.15rem;
}
.filter-blur {
  filter: blur(3px);
}
.fc-FAAD14 {
  color: #FAAD14;
}
.loaction {
  background-image: url('../../../assets/i/wap/booking/loaction.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.mt-120 {
  margin-top: -3rem;
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  background-color: #F5F7FA;
  z-index: 900;
}
.ease {
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
.p-t-50 {
  top: -1.25rem;
}
.bookDetail .description-content {
  padding-bottom: 0 !important;
}
.bookDetail .tinymce-text {
  padding-top: 0 !important;
}
.border-top-1px {
  position: relative;
  border: none;
}
.border-top-1px:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  transform-origin: 0 0;
  transform: scaleY(0.5);
  display: block;
}
.priceBar {
  margin-left: -0.6rem;
}
.transform3 {
  transform: scale(3);
}
.noTransform {
  transform: none;
}
</style>